<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="../internal.js" type="text/javascript"></script>
  <style type="text/css">
    .section {
        text-align: center;
        margin-top: 10px;
    }
    .section input {
        margin-left: 5px;
        width: 70px;
    }
  </style>
</head>
<body>
<div class="section">
  <span><var id="lang_tdBkColor"></var></span>
  <input id="J_tone" type="text"/>
</div>
<script type="text/javascript">
  var tone = $G("J_tone"),
          colorPiker = new UE.ui.ColorPicker({
              editor:editor
          }),
          colorPop = new UE.ui.Popup({
              editor:editor,
              content:colorPiker
          });
  domUtils.on(tone, "click", function () {
      colorPop.showAnchor(tone);
  });
  domUtils.on(document, 'mousedown', function () {
      colorPop.hide();
  });
  colorPiker.addListener("pickcolor", function () {
      tone.value = arguments[1];
      colorPop.hide();
  });
  colorPiker.addListener("picknocolor", function () {
      tone.value="";
      colorPop.hide();
  });
  dialog.onok=function(){
      editor.execCommand("edittd",tone.value);
  };

  var start = editor.selection.getStart(),
      cell = start && domUtils.findParentByTagName(start, ["td", "th"], true);
  if(cell){
      var color = domUtils.getComputedStyle(cell,'background-color');
      if(/^#/.test(color)){
          tone.value = color
      }

  }

</script>
</body>
</html>
